<!--  -->
<template>
  <div class="app-container">
    <el-page-header class="page-header" @back="goBack"></el-page-header>
    <!--  -->
    <div class="primary">
      <div class="primary-title">退货单信息</div>
      <div class="primary-list" style="padding-top: 12px">
        <div>退款单号:</div>
        <div>TH418919191919191561-1</div>
      </div>
      <div class="primary-list">
        <div>状态:</div>
        <div>待审核</div>
      </div>
      <div class="primary-list">
        <div>退款门店账号:</div>
        <div>jjapfsdf</div>
      </div>
      <div class="primary-list">
        <div>退货运单号:</div>
        <div>顺丰19848916915618918</div>
      </div>
      <div class="primary-list">
        <div>退货时间:</div>
        <div>2020-11-23 23:26:08</div>
      </div>
      <div class="primary-list">
        <div>退款时间:</div>
        <div>2020-11-23 23:26:08</div>
      </div>
    </div>
    <!--  -->
    <div class="primary">
      <div class="primary-title">采购单信息</div>
      <div class="primary-list" style="padding-top: 12px">
        <div>采购单编号:</div>
        <div>418919191919191561</div>
      </div>
      <div class="primary-list">
        <div>付款时间:</div>
        <div>2020-11-23 23:26:08</div>
      </div>
      <div class="primary-list">
        <div>供应商名称:</div>
        <div>深圳XXX工厂</div>
      </div>
      <div class="primary-list">
        <div>供应商账号:</div>
        <div>149651651561165</div>
      </div>
      <div class="primary-list">
        <div>门店名称:</div>
        <div>深圳XXXXXX有限公司</div>
      </div>
      <div class="primary-list">
        <div>门店账号:</div>
        <div>149651651561165</div>
      </div>
    </div>
    <!--  -->
    <div class="primary">
      <div class="primary-title">申请退款商品信息</div>
      <div class="primary-table">
        <public-table :table-head="tableHead" :table-data="tableData" :show-index="showIndex">
        </public-table>
      </div>
      <div v-if="tableData.length" class="primary-price">
        <div>合计:<span>￥6000</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import PublicTable from '@/components/Tables/PublicTable'
export default {
  components: {
    PublicTable
  },
  filters: {
    afterSaleStatusFilter(afterSaleStatus) {
      if (afterSaleStatus === 'WAIT_VERIFY') {
        return '待审核'
      } else if (afterSaleStatus === 'WAIT_SHIP') {
        return '待换货'
      } else if (afterSaleStatus === 'EXCHANGED') {
        return '已发货'
      } else if (afterSaleStatus === 'FINISHED') {
        return '已完成'
      } else if (afterSaleStatus === 'REJECT') {
        return '已驳回'
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      showIndex: true, // 表格序号
      // 表头
      tableHead: [
        { label: '商品名称', value: 'name' },
        { label: '规格', value: 'sku', width: 360 },
        { label: '单价', value: 'price', width: 200 },
        { label: '数量', value: 'account', width: 200 },
        { label: '退货小计', value: 'number', width: 200 }
      ],
      // 表格数据
      tableData: [
        { name: '上衣', sku: '绿色，L', price: '100', account: '2', number: '200' },
        { name: '上衣', sku: '绿色，L', price: '100', account: '2', number: '200' },
        { name: '上衣', sku: '绿色，L', price: '100', account: '2', number: '200' },
        { name: '上衣', sku: '绿色，L', price: '100', account: '2', number: '200' }
      ]
    }
  },

  computed: {},

  mounted() {
    this.getData()
  },

  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    // 数据处理
    getData() {
      this.tableData.forEach(t => {
        t.price = '￥' + t.price
        t.number = '￥' + t.number
      })
      console.log('数据处理:', this.tableData)
    }
  }
}
</script>
<style lang='scss' scoped>
.app-container /deep/ .el-table th > .cell {
  font-size: 15px;
}
.app-container /deep/ .el-page-header__left::after {
  display: none;
  color: rgba(0, 0, 0, 0.85);
}
.app-container /deep/ .el-page-header__title {
  font-size: 20px;
  font-weight: bold;
}
.app-container {
  .page-header {
    background: #fff;
    border-radius: 4px 4px 0 0;
    padding: 10px 0;
  }
  .primary {
    //background: #cccccc;
    width: 100%;
    padding-top: 18px;
    color: rgba(0, 0, 0, 0.85);
    .primary-title {
      font-weight: bold;
      font-size: 20px;
    }
    .primary-list {
      display: flex;
      font-size: 16px;
      padding: 8px 12px 8px 12px;
      div:nth-child(1) {
        //background: red;
        width: 120px;
        text-align: right;
      }
      div:nth-child(2) {
        //background: blue;
        padding-left: 6px;
        color: rgba(0, 0, 0, 0.45);
        overflow: hidden;
      }
    }
    .primary-table {
      //background: #cccccc;
      width: 100%;
      padding-top: 18px;
    }
    .primary-price {
      width: 100%;
      padding-top: 18px;
      padding-right: 140px;
      text-align: right;
      div {
        font-size: 16px;
        font-weight: bold;
        span {
          color: #ff4d4f;
          padding-left: 18px;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
